React Native中的布局
使用width和heightreact native中width和height没有单位，表示的是与设备像素密度无关的逻辑像素点<View style={{width:100,height:100,backgroundColor: 'gray'}}> <Text style={{fontSize: 16}}>测试字体</Text></View>上面的width、height、fontSize在android中宽和高被解析成dp、字体被解析为sp；iOS上宽和高被解析为pt，虽然width和height...
2024-01-10
React-Native 遇到的坑
一、错误日志：Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string.这个错误是在使用 RN官网推出最新的列表组件 FlatList 是出现的红色警告，出现这个错误可以正常运行，就是每次调试时看到它总觉得怪怪的，所以就查资料处理了，下面给出解决方...
2024-01-10
React Native 架构一览
一.架构设计整体上分为三大块，Native、JavaScript 与 Bridge：Native 管理 UI 更新及交互，JavaScript 调用 Native 能力实现业务功能，Bridge 在二者之间传递消息。即：最上层提供类 React 支持，运行在JavaScriptCore提供的 JavaScript 运行时环境中，Bridge 层将 JavaScript 与 Native 世界连接起来。具体的，Shadow Tree 用来定...
2024-01-10
react Native 第四天
1.props : 1.props 就是 Image 标签的src ，input 标签的text 用于组件初始化时需要的一些数据。2.使用props可以定制化插件，使插件可以复用3.props是从父元件传入2.理解state 1.有两种类型的数据可以控制组件，一个是props，props在组件的整个生命周期中是固定的2.如果要改变组件的数据需要改变，我们必须使...
2024-01-10
React Native 开发之IDE
个人暂时使用Atom和Nuclide，虽然有些不方便，不过喜欢界面以及安装简单哈哈，之后可能尝试下别的。译注：React Native官方更推荐使用WebStorm或Sublime Text来编写React Native应用。1. Atom和Nuclide1) Atom编辑器Atom是一个开源版本的编辑器，有着非常强大以及完美的体验，Atom最大的特色就是可以安装很多的插...
2024-01-10
React Native遇到的问题(一)
在我们创建React Native项目的时候发现gradle 版本相对比较低的，而且很多情况下直接编译会报错。而网上的很多解决方案就是gradle version改为1.2.3,于是，我有一个疑问，现在的gradle verion都已经3.0.1了，为什么还不升级呢？但是我发现我直接修改后，更是报各种错。 首先看下图这是我在网上搜到的一与...
2024-01-10
React Native——组件的生命周期
组件生命周期上流程图描述了组件从创建、运行到销毁的整个过程，可以看到如果一个组件在被创建，从开始一直到运行会依次调用getDefaultProps到render这五个函数；在运行过程中，如果有属性和状态的改变，又会触...
2024-01-10
React Native声明属性和属性确认
属性声明因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候我们应该在自定义组件中声明一些属性。 //自定义组件export default class ConfirmDialog extends Component { //.......
2024-01-10
React Native获取手机的各种高度
一、窗口高度即图中黄色+蓝色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('window').height; 二、屏幕高度即图中黄色+蓝色+红色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('screen').height; 三、内容高度即图中蓝色部分import { Style...
2024-01-10
React Native滑出面板和滚动视图
我正在开发与本机反应的应用程序。我有一个UI元素，它与iOS中的Maps相似，在其中您可以从底部滑动面板，在面板内部有一个可滚动的列表。对于滑出式面板，我使用的组件称为rn-sliding-up-panel。它有几个道具可以作为事件监听器。例如<SlidingUpPanel allowDragging={/*Boolean*/} onDragStart={()=>{} /*When it is about...
2024-01-10
iOS原生项目中集成React Native
1.本文的前提条件是，电脑上已经安装了CocoaPods，React Native相关环境。2.使用Xcode新建一个工程。EmbedRNMeituan[图1]3.使用CocoaPods安装React Native在工程目录下新建Podfile文件，并配置需要使用的第三方库pod 'React', '0.13.0-rc' pod "React/RCTText" pod "React/RCTActionSheet" pod "React/RCTGeolocation" pod "React/RCTIm...
2024-01-10
React Native开发之expo的使用
背景react native官方现在推荐的项目构建方式是create-react-native-app，即简称CRNA，并且建议使用expo这个APP来实时查看效果。使用CRNA构建项目后，命令行输入npm start，随即会为开发者创建一个开发服务器，并打印出大大的二维码，使用expo扫码，即可预览项目，不过真的这么丝滑吗，使用中还是遇到了一些...
2024-01-10
React Native之FlexBox布局
参考原文链接：https://www.cnblogs.com/wujy/p/5841685.html弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至...
2024-01-10
React Native小白入门学习路径——三
迷茫，真的迷茫。 或许是自己努力的还不够吧，在学习的过程中遇到了很多问题，自己尝试借助搜索引擎解决问题，无奈国内的教程写的还很基础，涉及到稍微具体一点的问题时讲解就比较少更新也比较慢，绝大多数还是很早之前的版本下的处理方式。满满的还总结出一个结论，绝大多数讲入门的教...
2024-01-10
Windows搭建React Native环境
自己搭建了Rctive Native的环境，还是遇到了些问题，记录下。一、环境搭建1.下载安装JDKJDK的下载安装配置最好1.8版本的，我自己的电脑之前安装的是1.7的，在运行的过程中出现过问题。2.下载配置Android SDK因为我自己是做Android开发的，这些都已经下载好了，也可以去AndroidDevTools去下载（http://www.and...
2024-01-10React Native悬浮按钮组件的示例代码
React Native悬浮按钮组件：react-native-action-button，纯JS组件，支持安卓和IOS双平台，支持设置子按钮，支持自定义位置和样式和图标。效果图安装方法npm i react-native-action-button --savereact-native link react-native-vector-icons因为用到了react-native-vector-icons图标组件，需要做下link。如果你项目中已经使用了react-na...
2024-01-10![[RN] <span style='color:red;'>React Native</span> 下拉放大动画](/wp-content/uploads/thumbs/534154_thumbnail.jpg)
[RN] React Native 下拉放大动画
React Native 下拉放大动画经测试，无法运行https://www.jianshu.com/p/1c960ad75020...
2024-01-10
【React】如何调试React Native？
根据rn的教程中，我把远程的json换成本地的json，但仍然报错，没办法得知到底哪里不对了，目前只知道alert方法。。var REQUEST_URL = 'http://172.20.10.2:8000/rnDemo/movies.json';....componentDidMount: function() {this.fetchData();},fetchData: function() {fetch(REQUEST_URL).then((response) => response.json())....
2024-01-10
React Native(十四)——Slider
最近我们rn版的App快要内测了，小伙伴们都在积极的改bug，于是在其中就遇到了关于Slider的部分小知识，特地记录自己用到的部分属性，也许恰好会帮助到用到该组件的你：属性罗列（https://reactnative.cn/docs/0.51/slider.html#content）：View props… 继承View的所有属性；1.disabled:如果为true，用户就...
2024-01-10
React-native 关于键盘遮挡界面问题
//引入 KeyboardAvoidingView import { KeyboardAvoidingView } from 'react-native';//使用 KeyboardAvoidingView render(){ return <KeyboardAvoidingView behavior={'padding'} style={{flex: 1}}> {/*具体页面内容*/} </KeyboardAvoidingView>}//android 已经处理 其实只需要处理I...
2024-01-10![[RN] <span style='color:red;'>React Native</span> 滚动跳转到指定位置](/wp-content/uploads/thumbs/536523_thumbnail.jpg)
[RN] React Native 滚动跳转到指定位置
React Native 滚动跳转到指定位置一、结构<ScrollView horizontal={true} ref={(view) => { this.myScrollView = view; }}> <View></View> ...<ScrollView>二、实现方法1）先给View增加一个onLayout属性<View onLayout={event=>{this.layoutX = event.nativeEvent.layout.x}}>2）然后通过下面这样就可以实现滚动到指定位置：...
2024-01-10React Native向特定的WhatsApp发送消息
我正在尝试从本机应用程序向WhatsApp联系人发送文本消息，我发现我可以通过链接来做到这一点Linking.openURL('whatsapp://send?text=hello');上面的代码仅打开whats应用程序，我需要打开一个具有特定号码的聊天记录，是否有我必须像文本一样发送的参数？回答：您可以使用它向特定号码发送消息：Linking.openUR...
2024-01-10
React-Native环境搭建（windows）
最近在研究reactNative开发，把环境搭建的过程给大家分享一下，RN环境的搭建真的是异常的困难啊如果需要运行react-native项目，首先必须具备的依赖环境有：1. Java Development Kit 1.8.x(更高版本暂不提供支持)2. Python 2.x(2.7)(3.x不提供支持)3. Node 8.3.x+（低版本不提供支持）4. Yarn5. react-native-cli6. Android Studio ...
2024-01-10
携程火车票业务在 React Native 实践中踩过的坑
本文为携程技术中心投稿，版权归原作者所有，非经允许，请勿转载。 【作者简介】姚瑞琼，前端程序媛一枚。2014年毕业后加入携程火车票事业部，今年年初起至今，主要负责 React Native 方案在火车票业务线的实践，先后参与并负责汽车票 RN 独立版、携程 App 抢票 RN 版的开发迭代。 欢迎技术投稿、...
2024-01-10
React-Native 自定义Button 获取远程数据
src/component/Button.jsimport React,{Component} from 'react';import { StyleSheet, Text, TouchableOpacity} from 'react-native';export default class Button extends Component { constructor(props) { super(props); this.state = { ...
2024-01-10
